import { Button, Form, FormInstance, Input } from 'antd';
import React, { useRef, useState } from 'react';
import { getVCodeByPhone } from '../../api/threeApi';

let CodeTimer: any = null;

export default function ChangePw(props: { form: FormInstance }) {
	const [changeType, setChangeType] = useState<'Password' | 'Phone'>('Password');

	const [codeTime, _setCodeTime] = useState(60);
	const codeTimeRef = useRef(codeTime);
	const setCodeTime = (data: number): void => {
		codeTimeRef.current = data;
		_setCodeTime(data);
	};

	const handleGetVCode = (form: FormInstance) => {
		form.validateFields(['phone']).then((values) => {
			CodeTimer = setInterval(() => {
				setCodeTime(codeTimeRef.current - 1);
				if (codeTimeRef.current === 0) {
					clearInterval(CodeTimer);
					setCodeTime(60);
				}
			}, 1000);
			getVCodeByPhone(values.phone, 'reset_password').then((res) => {
				console.log(res);
			});
		});
	};

	return (
		<div className="custom-modal">
			<div className="ta-c bor-b b-side ptb12 strong c-hint-b fs18">修改密码</div>
			<div className="p32">
				<div className="c-hint-b ta-c pb16">为了保证你的账号安全，密码至少6个字符，建议结合字母和数字</div>
				{changeType === 'Password' ? (
					<>
						<Form.Item name="passwordOld" rules={[{ required: true, message: '请输入旧密码' }]}>
							<Input.Password placeholder="请输入旧密码" />
						</Form.Item>
						<Form.Item name="password" rules={[{ required: true, message: '请输入新密码' }]}>
							<Input.Password placeholder="请输入新密码" />
						</Form.Item>
						<Form.Item
							name="password2"
							style={{ marginBottom: 0 }}
							rules={[{ required: true, message: '请再次输入新密码' }]}
						>
							<Input.Password placeholder="请再次输入新密码" />
						</Form.Item>
						<div
							className="ta-r c-hint-b pt8 pb16 cp"
							onClick={() => {
								setChangeType('Phone');
							}}
						>
							通过验证手机号修改
						</div>
					</>
				) : (
					<>
						<Form.Item
							name="phone"
							rules={[{ required: true, message: '请输入手机号/用户名/邮箱' }]}
							style={{ width: '100%' }}
						>
							<Input placeholder="手机号/用户名/邮箱" />
						</Form.Item>

						<div className="d-f jc-b">
							<Form.Item
								name="vcode"
								rules={[{ required: true, message: '请输入验证码' }]}
								style={{ width: '100%' }}
							>
								<Input placeholder="输入验证码" />
							</Form.Item>
							<Form.Item className="ml8">
								<Button
									block
									type="primary"
									onClick={() => handleGetVCode(props.form)}
									disabled={codeTimeRef.current < 60}
									style={{ width: 112 }}
								>
									{codeTimeRef.current < 60 ? codeTimeRef.current : '获取验证码'}
								</Button>
							</Form.Item>
						</div>

						<Form.Item
							style={{ marginBottom: 0 }}
							name="password"
							rules={[{ required: true, message: '请输入密码' }]}
						>
							<Input.Password placeholder="密码" />
						</Form.Item>

						<div
							className="ta-r c-hint-b pt8 pb16 cp"
							onClick={() => {
								setChangeType('Password');
							}}
						>
							通过密码修改
						</div>
					</>
				)}

				<div className="ta-c">
					<Button type="primary" htmlType="submit" className="w168">
						提交
					</Button>
				</div>
				<div className="c-hint-b ta-c pt8">修改密码后，需要重新登录账号</div>
			</div>
		</div>
	);
}
